<template>
  <v-layout class="rounded rounded-md border">
    <AppBar />
    <v-navigation-drawer>
      <v-list nav>
        <v-list-item link title="POI 导航" />
        <v-list-item link title="一键校准" />

      </v-list>
    </v-navigation-drawer>

    <v-main class="d-flex align-center justify-center" height="300">
      <v-container>
        <v-sheet
          border="dashed md"
          color="surface-light"
          height="200"
          rounded="lg"
          width="100%"
        />
      </v-container>
    </v-main>
  </v-layout>
</template>

<script lang="ts" setup>
  import { ros } from './api/ros'
  import { getMapNames } from './api/services'
  import AppBar from './components/AppBar.vue'
  import { useAppStore } from './stores/app'

  const serverPort = '9090'
  // const serverIp = "192.168.112.86";
  const serverIp = '192.168.112.226'

  const appStore = useAppStore()

  ros.connect('ws://' + serverIp + ':' + serverPort)

  ros.on('connection', async () => {
    console.log('机器人连接成功')
    const result = await getMapNames()
    if (result.ret) {
      const default_map_name = result.map_name_list.default_map_name
      appStore.setDefaultMapName(default_map_name)
    }
  })

  ros.on('close', () => {
    console.log('机器人连接关闭')
    // appStore.connect = false;
  })

  ros.on('error', error => {
    console.log('机器人连接错误', error)
    // appStore.connect = false
  })
</script>
